<template>
	<view class="container">

		<view class="">
			<u-subsection fontSize="14px" :list="list" :current="curNow" @change="sectionChange" bgColor="#3c9cff">
			</u-subsection>
		</view>

		<view>
			<u--form labelPosition="top" :model="myObject" :rules="rules" ref="uForm">
				<u-form-item label="订单号" prop="outTradeNo" labelWidth="200px">
					<u--input v-model="myObject.outTradeNo" border="none" placeholder="订单号" trim></u--input>
				</u-form-item>

				<u-form-item label="设备编码" prop="deviceId" borderBottom labelWidth="200px">
					<u--input v-model="myObject.deviceId" border="none" placeholder="设备编码" trim></u--input>
				</u-form-item>

				<u-form-item label="开始时间" prop="params.beginTime" borderBottom labelWidth="200px"
					@click="openDatetimePicker">
					<u--input v-model="myObject.params.beginTime" border="none"></u--input>
				</u-form-item>

				<u-form-item label="结束时间" prop="params.endTime" borderBottom labelWidth="200px"
					@click="openDatetimePicker2">
					<u--input v-model="myObject.params.endTime" border="none"></u--input>
				</u-form-item>

				<buuug7-simple-datetime-picker ref="myPicker" @submit="createTimeStart" :start-year="2023"
					:end-year="2099" :time-init="1688860800000" :time-hide="[true, true, true, false, false, false]"
					:time-label="['年', '月', '日', '时', '分', '秒']" />

				<buuug7-simple-datetime-picker ref="myPicker2" @submit="createTimeEnd" :start-year="2023"
					:end-year="2099" :time-init="1688860800000" :time-hide="[true, true, true, false, false, false]"
					:time-label="['年', '月', '日', '时', '分', '秒']" />

				<u-button type="primary" @click="getPageList(1)">查询</u-button>
			</u--form>
		</view>



		<view v-if="dataLists.length > 0">
			<u-list @scrolltolower="scrolltolower" class="u-list">
				<u-list-item v-for="(item, index) in dataLists" :key="index">
					<view class="box">
						<u--form labelPosition="left" :model="item">


							<u-form-item label="用户id" borderBottom labelWidth="120px">
								<u--input v-model="item.userId" border="none" disabled> </u--input>
							</u-form-item>
							<u-form-item label="用户手机号" borderBottom labelWidth="120px">
								<u--input v-model="item.iphoneNumber" border="none" disabled></u--input>
							</u-form-item>

							<u-form-item label="订单编号" borderBottom labelWidth="120px">
								<u--input v-model="item.outTradeNo" border="none" disabled></u--input>
							</u-form-item>


							<u-form-item label="设备编码" borderBottom labelWidth="120px">
								<u--input v-model="item.deviceId" border="none" disabled></u--input>
							</u-form-item>

							<u-form-item label="充值金额" borderBottom labelWidth="120px">
								<u--input v-model="item.chargeMoney" border="none" disabled></u--input>
							</u-form-item>



							<u-form-item label="状态" borderBottom labelWidth="120px">
								<u--input v-model="item.status" border="none" disabled></u--input>
							</u-form-item>

							<u-form-item label="充电开始时间" borderBottom labelWidth="120px">
								<u--input v-model="item.chargeStartTime" border="none" disabled></u--input>
							</u-form-item>


							<u-form-item label="充电结束时间" borderBottom labelWidth="120px">
								<u--input v-model="item.chargeEndTime" border="none" disabled></u--input>
							</u-form-item>

							<u-form-item label="商户名称" borderBottom labelWidth="120px">
								<u--input v-model="item.merchantName" border="none" disabled></u--input>
							</u-form-item>

							<u-form-item label="商户地址" borderBottom labelWidth="120px">
								<u--input v-model="item.addressFull" border="none" disabled></u--input>
							</u-form-item>

						</u--form>
					</view>
				</u-list-item>
			</u-list>

			<view style="display: flex; justify-content: center; margin-bottom: 20px; margin-top: 10px;">
				<view v-if="myObject.pageTotal > myObject.pageNum ">
					下拉加载更多...
				</view>
				<view class="" v-else>没有更多数据..</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		validateDate
	} from '@/utils/common';
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	import {
		getPageCjOrder
	} from "@/api/system/order";


	export default {

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},

		data() {
			return {
				src: "",
				list: ['数据总览', '查询订单'],
				curNow: 1,
				dataLists: [],
				myObject: {
					outTradeNo: '',
					deviceId: '',
					createTimeStart: '',
					createTimeEnd: '',
					status: '',
					pageNum: 1,
					pageSize: 5,
					params: {
						"beginTime": '',
						'endTime': ''
					},
					pageTotal: 1,
				},

				rules: {
					'merchantId': [{
						type: 'any',
						required: true,
						message: '那个场所',
						max: 8,
						trigger: ['blur', 'change']
					}],


				},
			};
		},
		methods: {
			scrolltolower() {
				if (this.myObject.pageNum >= this.myObject.pageTotal) {
					uni.$u.toast('没有更多数据!');
				} else {
					this.myObject.pageNum = this.myObject.pageNum + 1;
					this.getPageList(2);
				}
			},
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},

			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			openDatetimePicker2() {
				this.$refs.myPicker2.show();
			},

			closeDatetimePicker2() {
				this.$refs.myPicker2.hide();
			},
			createTimeStart(e) {
				console.log(e);
				this.myObject.params.beginTime = `${e.year}-${e.month}-${e.day}`;
			},
			createTimeEnd(e) {
				console.log(e);
				this.myObject.params.endTime = `${e.year}-${e.month}-${e.day}`;
			},
			sectionChange(index) {
				if (index == this.curNow) {
					return
				}
				let oldCurNow = this.curNow;
				this.curNow = index;
				if (index === 0) {
					uni.navigateTo({
						url: '/pages/order/order'
					})
				} else if (index === 1) {
					uni.navigateTo({
						url: '/pages/order/orderSearch'
					})
				}
			},

			reset() {
				this.dataLists = [];
				this.myObject.pageNum = 1,
					this.myObject.pageSize = 5,
					this.myObject.pageTotal = 1
			},

			async getPageList(tag) {
				try {
					if (tag === 1) {
						this.reset();
					}
					const res = await this.dateValidate();
					if (!res) {
						return;
					}
					const res2 = await getPageCjOrder(this.myObject);

					this.dataLists.push(...res2.rows);
					this.myObject.pageTotal = Math.ceil(res2.total / this.myObject.pageSize);
				} catch (error) {
					console.error('发生错误:', error);
				}
			},

			dateValidate() {
				return new Promise((resolve, reject) => {
					let tag = true;
					this.$refs.uForm.validate().then(res => {
						if (this.myObject.params.beginTime != '' && this.myObject.params
							.beginTime !=
							null && this.myObject.params.beginTime != undefined) {
							if (!validateDate(this.myObject.params.beginTime)) {
								tag = false;
								uni.$u.toast('开始日期格式不对');
							}
						}
						if (this.myObject.params.endTime != '' && this.myObject.params
							.endTime != null &&
							this.myObject.params.endTime != undefined) {
							if (!validateDate(this.myObject.params.endTime)) {
								uni.$u.toast('结束日期格式不对');
								tag = false;
							}
							if (this.myObject.params.beginTime == '') {
								uni.$u.toast('开始日期也必须选择');
								tag = false;
							}
						}
						if (tag) {
							resolve(true);
						} else {
							resolve(false);
						}
					}).catch(errors => {
						uni.$u.toast('校验失败11111111' + JSON.stringify(errors));
						resolve(false); // 这里也返回 false
					});
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		//width: 94%;
		padding: 12px;
		display: flex;
		flex-direction: column;
		margin: auto;
		background: linear-gradient(180deg, #f0f0f0 0%, #d0eaff 100%);
		height: 100vh;
	}


	.updateMessage {
		display: flex;
		justify-content: right;
		height: 40px;
		align-items: center;

		.mybuttom {
			margin-right: 10px;
		}

	}


	.box {
		background-color: #ffffff;
		/* 背景颜色 */
		border-radius: 8px;
		/* 圆角 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		padding: 4px;
		/* 内边距 */
		margin-top: 8px;
		/* 外边距 */
		transition: box-shadow 0.3s;
		/* 动画效果 */
	}

	.box:hover {
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
		/* 增强阴影 */
	}

	.u-list {
		max-height: 400px;
		/* 设置最大高度 */
		overflow-y: auto;
		/* 允许垂直滚动 */
	}
</style>